Created:04/16/2018
By: TeamXcel
Email: wowthemez@gmail.com
Thank you for purchasing our landing page. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The landing page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Zaara creative agency website template.">
<meta name="author" content="TeamXcel">
<title>Zaara Creative Agency Template</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Elegant Font Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Menu CSS -->
<link rel="stylesheet" href="css/menu.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="60">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id='preloader' >
<div class='loader' >
<img src="img/three-dots.svg" width="60" alt="">
</div>
</div><!-- Preloader -->
<header id="header" class="header_section">
<nav id="navbar_wrap" class="navbar header_1 header">
<div class="container">
<div class="navbar-header">
<button type="button" class="nav-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="brand">
<img src="img/logo-dark.png" alt="Logo" class="logo_dark">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav nav-menu">
<li class="active"><a data-scroll href="#home">Home <span class="sr-only">(current)</span></a></li>
<li><a data-scroll href="#about">About</a></li>
<li><a data-scroll href="#services">Services</a></li>
<li><a data-scroll href="#team">Team</a></li>
<li><a data-scroll href="#pricing">Pricing</a></li>
<li><a data-scroll href="#testimonial">Testimonial</a></li>
<li><a data-scroll href="#blog">Blog</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav><!-- Navigation Bar -->
</header> <!-- Header -->
<section id="home" class="hero_section padding">
</section><!-- Hero Section -->
<section id="about" class="promo_section bd-bottom">
</section><!-- Promo Section -->
<section id="services" class="service_section bg-grey bd-bottom padding">
</section><!-- /.service_section -->
<section class="content_section bd-bottom">
</section><!-- /Content Section -->
<section id="portfolio" class="portfolio_section bg-grey bd-bottom padding">
</section><!-- /.portfolio_section -->
<section id="team" class="team_section bd-bottom padding">
</section><!-- /.Team Section -->
<section id="pricing" class="pricing_section bg-grey bd-bottom padding">
</section><!-- /.pricing_section -->
<section id="testimonial" class="testimonial_section padding">
</section><!-- /.testimonial_section -->
<section class="cta_section_2 overlay padding">
</section><!-- /.cta_Section -->
<section id="blog" class="blog_section bd-bottom padding">
</section><!-- /.blog_section -->
<section id="contact" class="contact_section bd-bottom padding">
</section><!-- /.Contact Section -->
<div class="sponsor_section bg-grey bd-bottom">
</div><!-- ./sponsor_section -->
<section class="widget_section bg-dark padding">
</section><!-- /.widget_section -->
<footer class="footer_section bg-dark align-center">
</footer><!-- /.footer_section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- waypoints js -->
<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Imagesloaded JS -->
<script src="js/vendor/imagesloaded.pkgd.min.js"></script>
<!-- isotope JS -->
<script src="js/vendor/jquery.isotope.v3.0.2.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- Google Map JS -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGm_weV-pxqGWuW567g78KhUd7n0p97RY"></script>
<!-- vendor JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
<script>
(function($){ "use strict";
/*=========================================================================
Google Map Settings
=========================================================================*/
google.maps.event.addDomListener(window, 'load', init);
function init() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(40.6700, -73.9400),
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
styles: [{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]
};
var mapElement = document.getElementById('google_map');
var map = new google.maps.Map(mapElement, mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Location!'
});
}
})(jQuery);
</script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header_section"> <nav id="navbar_wrap" class="navbar header_1 header"> <div class="container"> <div class="navbar-header"> <button type="button" class="nav-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="brand"> <img src="img/logo-dark.png" alt="Logo" class="logo_dark"> </a> </div> <div id="navbar" class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav nav-menu"> <li class="active"><a data-scroll href="#home">Home <span class="sr-only">(current)</span></a></li> <li><a data-scroll href="#about">About</a></li> <li><a data-scroll href="#services">Services</a></li> <li><a data-scroll href="#team">Team</a></li> <li><a data-scroll href="#pricing">Pricing</a></li> <li><a data-scroll href="#testimonial">Testimonial</a></li> <li><a data-scroll href="#blog">Blog</a></li> <li><a data-scroll href="#contact">Contact</a></li> </ul> </div><!--/.navbar-collapse --> </div> </nav><!-- Navigation Bar --> </header> <!-- Header -->
<section id="home" class="hero_section padding"> <div class="container"> <div class="display-table"> <div class="table-cell"> <div class="hero_content align-center"> <span>Provide Best Solution</span> <h1>Best solutions for<br>amazing business now!</h1> <a href="#" class="zarra_btn">Explore Now</a> </div> </div> </div> </div> </section><!-- Hero Section -->
<section id="about" class="promo_section bd-bottom"> <div class="container"> <div class="promo_wrapper"> <div class="col-md-6"> <div class="promo_head wow fadeInRight" data-wow-delay="400ms" data-wow-duration="800ms"> <h2>Web development agency. <br>More possibilities for your business.</h2> <a class="play_btn" href="#"><i class="fa fa-play"></i>Play Video</a> </div> </div> <div class="col-md-6"> <div class="promo_items"> <div class="col-md-6 xs-padding"> <div class="promo_item wow fadeInUp" data-wow-delay="100ms" data-wow-duration="800ms"> <h3>Experienced team</h3> <p>Lorem Ipsum is simply dummy text of the printing and industry.</p> <a href="#">Learn More</a> </div> </div> </div> </div> </div> </div> </section><!-- Promo Section -->
<section id="services" class="service_section bg-grey bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Services</h2> <p>Lorem Ipsum is simply dummy text of the printing business <br>and typesetting industry.</p> </div><!-- /.section_heading --> <div class="service_lists"> <div class="col-md-4 col-xs-6 wow fadeInUp" data-wow-delay="100ms" data-wow-duration="800ms"> <div class="service_list"> <div class="service_content"> <i class="icon-laptop"></i> <h4>Social Media Marketing</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe optio sapiente voluptates.</p> </div> </div> </div> </div> </div> </section><!-- /.service_section -->
<section class="content_section bd-bottom"> <div class="container"> <div class="content_wrapper"> <div class="col-md-6"> <div class="content_info"> <h2>Best business solution</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <ul class="content_list mb-20"> <li>4.5 inch HD Touch Screen (1280 x 720)</li> <li>Android 4.4 KitKat OS</li> <li>1.4 GHz Quad Core™ Processor</li> <li>20 MP front and 28 megapixel CMOS rear camera</li> </ul> <a href="#" class="zaara_btn_2">Learn More</a> </div> </div> <div class="col-md-6 hidden-xs hidden-sm wow fadeInRight" data-wow-delay="200ms" data-wow-duration="800ms"> <img src="img/macbook.png" alt="image"> </div> </div> </div> </section><!-- /Content Section -->
<section id="portfolio" class="portfolio_section bg-grey bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Work Portfolios</h2> <p>Lorem Ipsum is simply dummy text of the printing business <br>and typesetting industry.</p> </div><!-- /.section_heading --> <ul class="portfolio_filter mb-30"> <li class="active" data-filter="*">All</li> <li data-filter=".branding">Branding</li> <li data-filter=".website">Website</li> <li data-filter=".print">Print</li> <li data-filter=".photo">Photo</li> </ul><!-- /.portfolio_filter --> </div><!-- /.container --> <div class="container-fluid no-padding"> <ul class="portfolio_items"> <li class="col-sm-3 col-xs-6 no-padding single_item"> <div class="portfolio_item"> <img src="img/portfolio-1.jpg" alt="portfolio" /> <div class="polio-info"> <a href="img/portfolio-1.jpg" class="img_popup">View →</a> <h3>Sounds Off Collection</h3> <p>Branding</p> </div> </div><!-- /.portfolio_item --> </li> </ul><!-- /.portfolio_items --> </div><!-- /.container-fluid --> </section><!-- /.portfolio_section -->
<section id="team" class="team_section bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Creative Team</h2> <p>Lorem Ipsum is simply dummy text of the printing business <br>and typesetting industry.</p> </div><!-- /.section_heading --> <div class="team_wrapper"> <div class="col-md-3 col-xs-6 sm-padding wow fadeInUp" data-wow-delay="100ms" data-wow-duration="800ms"> <div class="team_list"> <img src="img/team1.jpg" alt="team"> <div class="overlay"> <span>Angelina Rose</span> <ul class="team_social"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> </ul> </div> </div> </div> </div> </div> </section><!-- /.Team Section -->
<section id="pricing" class="pricing_section bg-grey bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Our Pricing</h2> <p>Lorem Ipsum is simply dummy text of the printing business <br>and typesetting industry.</p> </div><!-- /.section_heading --> <ul class="pricing_tables"> <li class="col-md-4 col-xs-6 wow fadeInUp" data-wow-delay="100ms" data-wow-duration="800ms"> <div class="pricing_content align-center"> <div class="pricing_head"> <h4 class="title">Basic</h4> <h3 class="price">$199</h3> </div> <ul class="pricing_feature"> <li>1 GB Photos</li> <li>Secure Online Transfer</li> <li>Unlimited Styles</li> <li>Customer Service</li> <li>Manual Backup</li> </ul> <div class="pricing_footer"> <a href="#" class="zarra_btn">Purchase Now</a> </div> </div> </li> </ul><!-- /.pricing_tables --> </div> </section><!-- /.pricing_section -->
<section id="testimonial" class="testimonial_section padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Testimonials</h2> <p>Lorem Ipsum is simply dummy text of the printing business <br>and typesetting industry.</p> </div><!-- /.section_heading --> <ul id="testimonial_carousel" class="testimonial_items owl-carousel"> <li class="testimonial_item"> <figure> <img src="img/testimonial-1.png" alt="Client"> </figure> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>Business Ipsum has been the industry's standard dummy text ever.</p> <h4>JONATHAN SMITH</h4> </li> </ul> </div> </section><!-- /.testimonial_section -->
<section class="cta_section_2 overlay padding"> <div class="container"> <div class="cta_content_2 align-center wow fadeInUp" data-wow-delay="200ms" data-wow-duration="800ms"> <h2>Ready To Work With Us?</h2> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy.</p> <a href="#" class="zarra_btn wow fadeInUp" data-wow-delay="300ms" data-wow-duration="800ms">Request Now</a> </div> </div> </section><!-- /.cta_Section -->
<section id="blog" class="blog_section bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Latest Stories</h2> <p>Lorem Ipsum is simply dummy text of the printing business <br>and typesetting industry.</p> </div><!-- /.section_heading --> <div class="col-md-4 col-xs-6 sm-padding"> <div class="blog_post"> <img src="img/blog-1.jpg" alt="blog-image"> <div class="blog_content"> <h4><a href="#">The Ultimate Renters Guide</a></h4> <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit Ea ratione optio.</P> <span class="post_meta"><a href="">READ MORE</a></span> </div> </div> </div> </div> </section><!-- /.blog_section -->
<section id="contact" class="contact_section bd-bottom padding"> <div class="container"> <div class="contact_wrapper"> <div class="col-md-6 sm-padding"> <div class="contact_map"> <div id="google_map"></div><!-- /#google_map --> </div> </div> <div class="col-md-6 sm-padding"> <div class="contact_box"> <div class="section_heading mb-30"> <h2>Contact With Us</h2> <p>Lorem Ipsum is simply dummy text of the printing business <br>and typesetting industry.</p> </div><!-- /.section_heading --> <div class="contact_form"> <form action="contact.php" method="post" id="ajax_form" class="form-horizontal footer_form"> <div class="form-group"> <div class="col-sm-6"> <input type="text" id="name" name="name" class="form-control" placeholder="Name" required> </div> <div class="col-sm-6"> <input type="email" id="email" name="email" class="form-control" placeholder="Email" required> </div> </div> <div class="form-group"> <div class="col-xs-12"> <textarea id="message" name="message" cols="30" rows="5" class="form-control" placeholder="Message" required></textarea> </div> </div> <div class="form-group"> <div class="col-xs-12"> <button id="submit" class="zarra_btn" type="submit">Send Message</button> </div> </div> <div id="form-messages" class="alert" role="alert"></div> </form> </div> </div> </div> </div> </div> </section><!-- /.Contact Section -->
<div class="sponsor_section bg-grey bd-bottom"> <div class="container"> <ul id="sponsor_carousel" class="sponsor_items owl-carousel"> <li class="sponsor_item"> <img src="img/sponsor-1.png" alt="sponsor-image"> </li> </ul> </div> </div><!-- ./sponsor_section -->
<section class="widget_section bg-dark padding"> <div class="container"> <div class="col-md-3 col-xs-6 sm-padding"> <div class="footer_widget"> <a href="#"><img class="mb-15" src="img/logo-light.png" alt="Zaara" /></a> <p>We create web product for the help and the growth our business. We create web for the help.</p> </div> </div> <div class="col-md-3 col-xs-6 sm-padding"> <div class="footer_widget"> <h4 class="text-white">Company</h4> <ul class="links"> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Investment</a></li> <li><a href="#">Terms</a></li> </ul> </div> </div> <div class="col-md-3 col-xs-6 sm-padding"> <div class="footer_widget"> <h4 class="text-white">Usefull Links</h4> <ul class="links"> <li><a href="#">Web Design</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Policy</a></li> </ul> </div> </div> <div class="col-md-3 col-xs-6 sm-padding"> <div class="footer_widget"> <h4 class="text-white">Contact Info</h4> <p>03)683 723007 <br> 301 The greenhouse custard <br> main office London, E2 8DY. <a href="#">www.yourdomain.com</a></p> </div> </div> </div> </section><!-- /.widget_section -->
<footer class="footer_section align-center"> <div class="container"> <p>© 2018 Zarra Powered by TeamXcel</p> </div> </footer><!-- /.footer_section -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
jquery.mb.YTPlayer.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
jquery.counterup.min.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
TeamXcel